<template>
  <div class="_map">
    <!-- <Head title="店铺定位"/> -->
    <div class="container" style="height:calc(100vh - 60px);padding-top:0">
      <div class="search">
        <div class="search_left">
          <span class="search_left_box">
            <span @click="setCity">
              <i class="iconfont iconsanjiaoxingzhankai"></i>
              {{city_}}
            </span>
          </span>
        </div>
        <div class="search_right">
          <el-amap-search-box
            class="search-box"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
          ></el-amap-search-box>
        </div>
      </div>
      <div class="amap-page-container">
        <el-amap
          ref="map"
          vid="amapDemo"
          :plugin="plugin"
          :zoom="zoom"
          :center="center"
          class="amap-demo"
          :events="events"
        >
          <el-amap-marker
            vid="component-marker"
            :position="makerConf.position"
            :content="makerConf.content"
          ></el-amap-marker>
        </el-amap>
      </div>
      <div class="address_box">
        <div class="address_box_head">
          <div class="address_box_head_left">附近地址</div>
          <div class="address_box_head_right" @click="saveAddressa">保存地址</div>
        </div>
        <div class="address_box_con">
          <div
            :class="currIndex==index?'address_box_list address_box_list_act':'address_box_list'"
            v-for="(item,index) in list"
            :key="index"
            @click="select(item,index)"
          >
            <div class="address_box_list_left">
              <img src="/static/image/detail_1.png" alt>
            </div>
            <div class="address_box_list_right">
              <div class="address_box_list_right_box">
                <div class="address_box_list_right_top">{{item.name}}</div>
                <div class="address_box_list_right_bot">{{store_address}}{{item.address}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="showCity" position="bottom" :overlay="false">
        <van-area
          :area-list="areaList"
          :columns-num="2"
          title="选择店铺所在地"
          @cancel="hideCity"
          @confirm="selectCity"
        />
      </van-popup>
    </div>
  </div>
</template>
  
 
  <script>
import axios from "axios";
import Head from "@/components/_head";
import areaList from "@/assets/js/city";
export default {
  name: "amap-page",
  components: {
    Head
  },
  data() {
    var me = this;
    return {
      list: [],
      store_address: "",
      currIndex: 0,
      zoom: 16,
      areaList: areaList,
      city_: "北京市",
      showCity: false,
      center: [113.371517, 23.13758],
      amap: {},
      events: {
        init: o => {
          me.amap = o;
          //去掉logo
          document.getElementsByClassName("amap-logo")[0].style.display =
            "none";
        },
        dragend: function(e) {
          console.log(111);
          var point = this.getCenter();
          var pos = [point.lng, point.lat];
          me.makerConf.position = [point.lng, point.lat];
          console.log(this.getCenter());
          me.getList(pos);
        }
      },
      makerConf: {
        position: [113.371517, 23.13758],
        content: ""
      },
      searchOption: {
        city: me.city,
        citylimit: true
      },
      plugin: [
        {
          pName: "Geolocation",
          events: {
            init(o) {
              o.getCurrentPosition((status, result) => {});
            },
            complete: function(result) {
              me.store_address =
                result.addressComponent.province + result.addressComponent.city;
              me.city_ = result.addressComponent.city;
              me.searchOption.city = me.city_;
              let position = [result.position.lng, result.position.lat];
              me.lng = position[0];
              me.lat = position[1];
              me.center = [me.lng, me.lat];
              me.zoom = 16;
              me.makerConf.position = [me.lng, me.lat];
              me.getList(position);
              me.loaded = true;
            },
            error: function() {
              me.searchOption.city = "广州";
              me.city_ = "广州市";
              let position = [113.371517, 23.13758];
              me.lng = position[0];
              me.lat = position[1];
              me.center = [me.lng, me.lat];
              me.zoom = 16;
              me.makerConf.position = [me.lng, me.lat];
              me.getList(position);
              me.loaded = true;
            }
          }
        }
      ]
    };
  },
  created() {
    var me = this;
  },
  mounted() {
    this.$nextTick(() => {
      document.getElementsByClassName("search-box-wrapper")[0].firstElementChild.placeholder =
        "🔍搜索小区名/大厦名";
    });
  },
  methods: {
    // 保存地址
    saveAddressa() {
      this.$emit('saveAddress',this.center,this.store_address + this.list[this.currIndex].address)
    },
    // 选择地址
    select: function(item, index) {
      var me = this;
      me.currIndex = index;
      var point = item.location;
      me.makerConf.position = [point.lng, point.lat];
      me.center = [point.lng, point.lat];
    },
    // 选择了城市
    selectCity(e) {
      this.store_address = e[0].name + e[1].name;
      this.city_ = e[1].name;
      this.searchOption.city = this.city_;
      this.amap.setCity(e[1].name, result => {
        if (result && result.length > 0) {
          let position = [parseFloat(result[0]), parseFloat(result[1])];
          this.lng = position[0];
          this.lat = position[1];
          this.center = [this.lng, this.lat];
          this.zoom = 16;
          this.makerConf.position = [this.lng, this.lat];
          this.getList(position);
          this.loaded = true;
        }
      });
      this.showCity = false;
    },
    // 隐藏 城市选择
    hideCity() {
      this.showCity = false;
    },
    // 选择城市
    setCity() {
      this.showCity = true;
    },
    //this.$refs.map.$$getCenter()
    getList: function(result) {
      //获取列表
      console.log(result);
      var me = this;
      me.$Geocoder({
        lnglatXY: result,
        success: function(res) {
          console.log(res);
          if (res.regeocode && res.regeocode.pois) {
            me.list = res.regeocode.pois;
          } else {
            me.list = [];
          }
        },
        error: function(res) {
          console.log(res);
          me.list = [];
        }
      });
    },
    onSearchResult(pois) {
      //搜索
      let latSum = 0;
      let lngSum = 0;
      var me = this;

      var mymap = me.$refs.map.$$getInstance();

      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        var poi = pois[0];
        var lng = poi["lng"];
        var lat = poi["lat"];
        me.center = [lng, lat];
        me.makerConf.position = [lng, lat];
        //me.makerConf.content = poi.name;
        me.list = pois;
      } else {
        me.list = [];
      }
    },

    $Geocoder(options) {
      //将坐标点转化为，详细地址
      options = options || {};
      if (AMap) {
        AMap.plugin(["AMap.Geocoder"], () => {
          const geocoder = new AMap.Geocoder({
            radius: options.radius || 1000,
            extensions: options.extensions || "all"
          });
          var lnglatXY = options.lnglatXY || [114.397169, 30.50576]; //已知点坐标

          geocoder.getAddress(lnglatXY, function(status, result) {
            if (status === "complete" && result.info === "OK") {
              options.success && options.success(result);
            } else {
              options.error && options.error(status, result);
            }
          });
        });
      }
    }
  },
  watch: {
    list: function() {
      this.currIndex = 0;
    }
  }
};
</script>
<style lang="less">
._map {
  .address_box {
    height: calc(100vh - 320px);
    width: 100%;
    background: #fff;
    overflow-y: auto;
    .address_box_head {
      height: 2.5rem;
      background: rgb(187, 187, 189);
      color: rgb(140, 140, 138);
      font-size: 0.9rem;
      padding: 0 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: fixed;
      top: 259px;
      width: 100%;
      .address_box_head_left {
        width: 80%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .address_box_head_right {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: @actColor;
      }
    }
    .address_box_con {
      padding-top: 2.5rem;
    }
    .address_box_list {
      height: 3.5rem;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 0.5rem;

      .address_box_list_left {
        height: 100%;
        width: 2rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          height: 1.4rem;
          width: 1rem;
          object-fit: fill;
        }
      }
      .address_box_list_right {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .address_box_list_right_top {
          font-size: 0.9rem;
          columns: #000;
        }
        .address_box_list_right_bot {
          font-size: 0.6rem;
          color: #888;
          .text(1);
        }
      }
    }
    .address_box_list_act {
      color: @actColor;
      background: #efefef;
    }
  }
  .search {
    height: 60px;
    width: 100%;
    padding: 0 0.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    .search_left {
      width: 30%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .search_left_box {
        width: 80%;
        height: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
        color: #fff;
        background: @actColor;
        border-radius: 100px;
        padding: 0 0.5rem;
        span {
          .text(1);
        }
        .iconfont {
          font-size: 0.9rem;
        }
      }
    }
    .search_right {
      width: 70%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 0.5rem;
      .el-vue-search-box-container {
        position: relative;
        width: 100%;
        height: 2.5rem;
        background: #fff;
        box-shadow: none;
        border-bottom: 1px solid #888;
        z-index: 10;
        .search-box-wrapper .search-btn {
          width: 45px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: transparent;
          cursor: pointer;
          font-size: 0.9rem;
          color: #000;
        }
      }
    }
  }
}

.amap-page-container {
  height: 200px;
  position: relative;
}

.amap-demo {
  height: 250px;
}
.amap-logo {
  display: none;
}
.amap-copyright {
  bottom: -100px;
  display: none;
}
</style>